<template>
  <Row :gutter="20" type="flex" justify="center" align="middle" style="height: 100vh">
    <Col :span="7">
      <Card bordered>
        <img src="../assets/login_title.png" style="display: flex; margin-bottom: 20px" />

        <Login @on-submit="handleSubmit">
          <UserName name="userName" />
          <Password name="userPassword" />
          <Captcha class="demo-login-captcha" name="captcha" :count-down="0" @on-get-captcha="handleGetCaptcha">
            <template #text>
              <img :src="'https://file.iviewui.com/iview-pro/' + captcha" />
            </template>
          </Captcha>
          <div class="demo-auto-login">
            <Checkbox v-model="autoLogin" size="large" class="checkbox">自动登录</Checkbox>
            <a @click="faceScan">人脸登录</a>
            <a @click="regAccout">注册账号</a>
          </div>
          <Submit />
        </Login>
      </Card>
    </Col>
  </Row>
</template>

<script>
import router from "@/router";
import { login } from "@/api/user"; // 确保正确导入 login API 方法

export default {
  data() {
    return {
      form: {
        captcha: "a68t",
      },
      captcha: "captcha1.png", // 初始验证码图片
      autoLogin: true,
    };
  },
  methods: {
    // 设置 cookie
    setCookie(name, value) {
      document.cookie = `${name}=${value}; path=/;`;
    },

    // 处理表单提交
    handleSubmit(valid, { userName, userPassword, captcha }) {
      if (valid) {
        // 验证输入的验证码是否正确
        if (captcha === this.form.captcha) {
          login({ userName, userPassword })
            .then((res) => {
              if (res.data.token == null) {
                this.message("error", "用户名或密码错误");
              } else {
                // 保存令牌到 cookie
                this.setCookie("token", res.data.token);
                console.log(res.data.token)
                this.message("success", "登录成功");
                router.push("/");
              }
            })
            .catch((error) => {
              this.message("error", "登录失败");
              console.error(error);
            });
        } else {
          this.message("error", "验证码错误");
          this.handleGetCaptcha();
        }
      }
    },

    // 处理获取新的验证码
    handleGetCaptcha() {
      // 模拟验证码的切换
      if (this.captcha === "captcha1.png") {
        this.captcha = "captcha2.png";
        this.form.captcha = "78ul";
      } else {
        this.captcha = "captcha1.png";
        this.form.captcha = "a68t";
      }
    },

    // 跳转到注册页面
    regAccout() {
      router.push("/register");
    },
    faceScan() {
      router.push("/facescan");
    },


    // 设置消息提示
    message(type, content) {
      this.$Message[type]({
        background: true,
        content: content,
      });
    },
  },
};
</script>

<style>
body {
  background-image: url(../assets/login_bg.jpg);
  background-size: cover;
}
.demo-login {
  width: 400px !important;
  margin: 0 auto;
}
.demo-login-captcha .ivu-btn {
  padding: 0;
}
.demo-login-captcha .ivu-btn img {
  height: 28px;
  position: relative;
  top: 4px;
}
.login {
  display: flex;
  justify-content: space-evenly;
}
.demo-auto-login a {
  float: right;
  margin-top: -10px;
  margin-bottom: 10px;
  font-size: medium;
  padding-right: 10px;
}
.demo-auto-login .checkbox {
  float: left;
  margin-top: -10px;
  margin-bottom: 10px;
}

</style>
